<template>
  <div>
    <div class="smallLogo"><img src="../../assets/front-img/logo.png" alt=""></div>
    <div class="title_bg">
      <div class="title">B2C工行资料认证</div>
    </div>
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="94px">
      <el-form-item label="手机号码" prop="username">
        <el-input v-model.trim="form.username" clearable/>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入8位以上字母和数字组合密码" />
      </el-form-item>
    </el-form>
    <div class="registerWrap" >
      <el-button :loading="loading" type="primary" @click="login()">登录</el-button>
    </div>
    <div class="tips_bg">
      <div class="tips">* 仅限已在众茶通APP注册认证并审核通过的供应商登录</div>
    </div>
  </div>
</template>

<script>
import {
  login, b2cAuth
} from "@/api/user";

export default {
  name: "B2cAuth",
  props: {

  },
  components: {

  },
  data() {
    return {
      form: {
        password: "",
        username: "",
        type: 2,
      },
      rules: {
        username: [{ required: true, message: "请填写", trigger: "blur" }],
        password: [{ required: true, message: "请填写", trigger: "blur" }],
      },
      loading: false,
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    login() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true;

          this.$store.dispatch("user/login", this.form).then(res => {
            this.loading = false;

            b2cAuth({ token: res}).then(response => {
              let url = "https://zcgj-api.utea88.com/dinner/ICBC/b2c/confirm?token=" + res;
              window.location.href = url
            })
            .catch((error) => {
              console.log(error)
            })
          }).catch((err) => {
            this.loading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

  .el-form {
    position: relative;
    padding: 15px 15px;
    overflow: hidden;
    background: #fff;
  }
  .smallLogo {
    @include flex-center;
    margin-top: 10px;
    width: 100%;
    height: 38px;
    background: white;
    padding: 2px;
    img {
      height: 100%;
    }
  }

  .title_bg {
    @include flex-center;
    margin-top: 15px;
    width: 100%;

    .title {
      color: black;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .registerWrap {
    @include flex-center;
    margin-top: 15px;
    
    .el-button {
      width: 80%;
    }
  }

  .tips_bg {
    @include flex-center;
    margin-top: 15px;

    .tips {
      color: red;
    }
  }
</style>